<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li class="one">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <b>123</b>
    <button>按钮</button>
    <input type="text" />
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  let li = $("li");
  //在dom对象的属性中 有一个叫attributes的属性 这里面的属性都直接展示到元素的结构上
  //   dom对象的其他属性 不显示在元素结构上
  // jquery规律： 大部分情况下 调用的方法不传参就是获取，传递参数就是设置
  li[0].aaaa = "77777";
  li[0].setAttribute("id", "2201"); //原生
  console.dir(li[0]);
  //prop 设置元素对象中的属性 不会展示到元素上 操作checked selected disabled innerText innerHtml ...这些属性的时候用prop
  $("b").prop("ani", "cat");
  //removeProp(key)  移除属性
  $("b").removeProp("ani");
  console.log($("b"));
  //attr 将来的属性会展示到元素上 class id 自定义的属性  都用这个方法
  $("b").attr("ani", "cat");
  //   removeAttr(key)  移除属性
  $("b").removeAttr("ani");
  console.log($("b"));
  //addClass 添加类名
  $("b").addClass("bbb");
  $("b").addClass("bbb2");
  //removeClass 移除类名
  $("b").removeClass("bbb");
  // toggleClass  切换类名
  $("button").click(function () {
    $(this).toggleClass("flag");
    console.log(this);
  });
  //text
  // $("b").text("<del>998</del>");
  //   console.log($("b").text());
  //html
  $("b").html("<del>998</del>");
  console.log($("b").html());
  // val 操作表单元素属性
  $("input").val("abc");
  console.log($("input").val());
</script>
